<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-02 22:46:17
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-02 22:46:23
 * @FilePath: \2306\week3t\4_2改进使用创建模板
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>电商商品展示</title>
</head>
<body>
    <div id="app">
        <product-list :products="products"></product-list>
    </div>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 商品项组件（子组件）
        Vue.component('product-item', {
            props: ['product'],
            template: `
                <div>
                    <h2>{{ product.name }}</h2>
                    <p>价格: {{ product.price }}</p>
                    <p>描述: {{ product.description }}</p>
                </div>
            `
        });

        // 商品列表组件（父组件）
        Vue.component('product-list', {
            props: ['products'],
            template: `
                <div>
                    <h1>商品列表</h1>
                    <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
                </div>
            `
        });

        // 根实例
        var app = new Vue({
            el: '#app',
            data: {
                products: [
                    { id: 1, name: '商品A', price: 100, description: '这是一个很棒的商品A' },
                    { id: 2, name: '商品B', price: 200, description: '这是一个很棒的商品B' },
                    { id: 3, name: '商品C', price: 300, description: '这是一个很棒的商品C' }
                ]
            }
        });
    </script>

    <!-- 定义模板 -->
    <template id="product-item-template">
        <div>
            <h2>{{ product.name }}</h2>
            <p>价格: {{ product.price }}</p>
            <p>描述: {{ product.description }}</p>
        </div>
    </template>

    <template id="product-list-template">
        <div>
            <h1>商品列表</h1>
            <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
        </div>
    </template>
</body>
</html>
